<template>
  <div class="login-box">
    <div class="login-content">
      <h3>新活动后台</h3>
      <el-form :model="formData" status-icon :rules="rules" ref="formData" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="userName">
          <el-input type="text" v-model="formData.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工号" prop="workNumber">
          <el-input type="text" v-model="formData.workNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input type="tel" v-model="formData.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passwd">
          <el-input type="password" v-model="formData.passwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="再次输入密码" prop="checkPass">
          <el-input type="password" v-model="formData.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="年龄" prop="age">
            <el-input v-model.number="formData.age"></el-input>
          </el-form-item> -->
        <el-form-item>
          <!-- <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button> -->
          <el-button type="primary" :loading="submitIng" @click="submitForm('formData')" class="_submit_">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
	data() {
		var checkUserName = (rule, value, callback) => {
			let reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
			if (!value) {
				callback(new Error('姓名不能为空'));
			} else if (!reg.test(value)) {
				callback(new Error('姓名格式有误'));
			} else {
				callback();
			}
		};
		var workNumber = (rule, value, callback) => {
			if (!value) {
				callback(new Error('工号不能为空'));
			} else if (!/^[0-9]*$/.test(value)) {
				callback(new Error('工号只能为数字'));
			} else {
				callback();
			}
		};

		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				console.log(this.formData, 'this.$refs.formData');
				if (this.formData.checkPass !== '') {
					this.$refs.formData.validateField('checkPass');
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.formData.passwd) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		var validatePhone = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('手机号码不能为空'));
			} else if (!/^1(3|4|5|7|8)\d{9}$/.test(value)) {
				callback(new Error('手机号码格式有误'));
			} else {
				callback();
			}
		};
		return {
			formData: {
				userName: '', // 姓名
				workNumber: '', // 工号
				phone: '',
				passwd: '', // 密码
				checkPass: '',
			},
			submitIng: false,
			rules: {
				userName: [{ validator: checkUserName, trigger: 'blur' }],
				workNumber: [{ validator: workNumber, trigger: 'blur' }],
				phone: [{ validator: validatePhone, trigger: 'blur' }],
				passwd: [{ validator: validatePass, trigger: 'blur' }],
				checkPass: [{ validator: validatePass2, trigger: 'blur' }],
			},
		};
	},
	computed: {
		isEnter() {
			return this.$route.query['05'];
		},
	},
	created() {
		// console.log()
		this.isEnter !== 'balabala' ? this.$router.replace('/login') : '';
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this._register();
					// alert("submit!");
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		_register() {
			this.$http('/admin/register', this.formData).then(res => {
				if (res.code === 10200) {
					log.ok(res.msg);
					this.locationSet('isLogin', 1);
					this.locationSet('userInfo', res.data);
					this.$router.replace('/');
				} else {
					log.warn(res.msg);
				}
				// console.log(res);
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
	},
};
</script>
<style lang="scss">
.login-box {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: #303133;
	.login-content {
		h3 {
			color: #fff;
			font-size: 32px;
			text-align: center;
			padding-left: 30px;
		}
		width: 400px;
		._submit_ {
			width: 100%;
		}
	}
}
</style>


